<template>
	<view class="binding_user">
		<view class="bind_logo">
			<text>LOGO</text>
			<text>创翔智慧社区</text>
		</view>
		<button class="bind_we_chat" open-type="getUserInfo" @getuserinfo="appLoginWx">微信绑定</button>
		<view class="bind_we_foo">
			<text class="we_foo_fl">LOGO</text>
			<view class="we_foo_fr">
				<text class="foo_fr_one">创翔智慧社区</text>
				<text class="foo_fr_tow">致力服务千万家</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setStorages
	} from '@/utils/storage'
	export default {
		data() {
			return {

			};
		},
		onShow() {},
		methods: {
			appLoginWx() {
				let _this = this
				// 获取服务供应商
				uni.getProvider({
					// 服务类型,授权登录
					service: 'oauth',
					success: function(res) { 
						if (res.provider.indexOf('weixin') >= 0) {
							uni.login({
								provider: 'weixin',
								success: (res) => {
									let {
										code
									} = res
									uni.getUserInfo({
										provider: 'weixin',
										success: (info) => {
											// code 用户登录凭证, 换取openid和session_key等信息
											_this.$http.get('wechat/getUserInfoByCode/' + code).then(res => {    
													let userInfo = Object.assign(res.data,info.userInfo) 
													// 存储数据
													uni.setStorageSync('userInfo',userInfo)  
													if(res.code == 200){
														uni.switchTab({
															url: '/pages/home/index'
														})
													}  
											})
										},
										fail: () => {
											uni.showToast({
												title: "微信登录授权失败",
												icon: "none"
											});
										}
									})

								},
								fail: () => {
									uni.showToast({
										title: "微信登录授权失败",
										icon: "none"
									});
								}
							})

						} else {
							uni.showToast({
								title: '请先安装微信或升级版本',
								icon: "none"
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.binding_user {
		position: relative;
		height: 100vh;
		text-align: center;

		.bind_logo {
			position: absolute;
			left: 50%;
			top: 260rpx;
			font-size: 48rpx;
			color: #6ed7c2;
			line-height: 160rpx;
			transform: translate(-50%);

			& text:nth-child(1) {
				display: block;
				font-size: 72rpx;
				font-family: FZChaoCuHei-M10T;
				font-weight: 700;
				color: #40C5A8;
				text-shadow: 0px 5rpx 12rpx rgba(68, 198, 170, 0.3);
				background: linear-gradient(-74deg, #70DAC4 0%, #3EC4A7 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		.bind_we_chat {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 411rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			box-shadow: 0px 5rpx 12rpx 1rpx rgba(68, 198, 170, 0.3);
			border-radius: 45rpx;
			transform: translate(-50%, 100%);

		}

		.bind_we_foo {
			position: absolute;
			display: flex;
			justify-content: space-around;
			left: 50%;
			bottom: 10rpx;
			width: 400rpx;
			height: 100rpx;
			transform: translateX(-50%);

			.we_foo_fl {
				font-size: 48rpx;
				font-family: FZChaoCuHei-M10T;
				font-weight: 700;
				color: #40C5A8;
				text-shadow: 0px 5rpx 12rpx rgba(68, 198, 170, 0.3);
				background: linear-gradient(-74deg, #70DAC4 0%, #3EC4A7 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.we_foo_fr {
				font-size: 28rpx;

				.foo_fr_one {
					display: block;
				}

				.foo_fr_tow {
					font-size: 20rpx;
				}
			}
		}
	}
</style>
